<template>
  <div class="demo">
    <div class="demo-title">弹出层中的新建表单</div>
    <div class="demo-content">
      <Button type="primary" @click="visible = true">New Collection</Button>
      <Modal
        v-model:visible="visible"
        title="Create a new collection"
        ok-text="Create"
        cancel-text="Cancel"
        @ok="onOk"
      >
        <Form ref="formRef" :model="formState" layout="vertical" name="form_in_modal">
          <Form.Item
            name="title"
            label="Title"
            :rules="[{ required: true, message: 'Please input the title of collection!' }]"
          >
            <Input v-model:value="formState.title" />
          </Form.Item>
          <Form.Item name="description" label="Description">
            <Input.TextArea v-model:value="formState.description" />
          </Form.Item>
          <Form.Item name="modifier">
            <Radio.Group v-model:value="formState.modifier">
              <Radio value="public">Public</Radio>
              <Radio value="private">Private</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, ref, toRaw } from 'vue';
  import Button from '@sscd/button';
  import Input from '@sscd/input';
  import Modal from '@sscd/modal';
  import Radio from '@sscd/radio';
  import Form from '@sscd/form';
  import type { FormInstance } from '@sscd/form';
  interface Values {
    title: string;
    description: string;
    modifier: string;
  }
  const formRef = ref<FormInstance>();
  const visible = ref(false);
  const formState = reactive<Values>({
    title: '',
    description: '',
    modifier: 'public',
  });
  const onOk = () => {
    formRef.value
      ?.validateFields()
      .then((values) => {
        console.log('Received values of form: ', values);
        console.log('formState: ', toRaw(formState));
        visible.value = false;
        formRef.value?.resetFields();
        console.log('reset formState: ', toRaw(formState));
      })
      .catch((info) => {
        console.log('Validate Failed:', info);
      });
  };
</script>
